import React, { useEffect } from 'react';
import { Rotation } from './RotationChart.style'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'

const RotationChart = (props) => {

  const { rotationImg } = props;
  console.log(rotationImg);
  useEffect(() => {
    setTimeout(() => {
      new Swiper('.swiper-container', {
        loop: true,
        autoplay: {
          delay: 1000
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true,
          clickableClass: 'my-pagination-clickable'
        }
      })
      // swiper.
    }, 100)
  }, [])



  return (
    <Rotation>
      <div className="rotation-box">
        <div className="swiper-container" >
          <div className="swiper-wrapper">
            {
              rotationImg.map((item) => {
                return (
                  <div
                    key={item.id}
                    className="swiper-slide"
                  >

                    <img className="rotationChart-img"
                      src={item.picUrl} alt="" />
                    <div className="swiper-title">{item.show}</div>
                  </div>
                )
              })
            }
          </div>
          <div className="my-pagination-clickable"></div>
          {/* <div className="my-pagination-clickable swiper-pagination"></div> */}
        </div>

      </div>
    </Rotation>
  );
}

export default RotationChart;